Hexo博客搭建系列 No.2 将静态博客挂载到 GitHub Pages 与 Cloudflare Pages

1.将静态博客挂载到 GitHub Pages

  1. 安装 hexo-deployer-git
1
npm install hexo-deployer-git --save
  1. 修改 _config.yml 文件
    在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的 配置描述。
    修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）。
1
2
3
4
5
deploy:
  type: git
  repository: [email protected]:你的github用户名/cmliussss2024.github.io.git
             #[email protected]:你的github用户名/你的hexo博客在github里面的项目名
  branch: main
  1. 修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。
1
2
3
4
5
6
7
// Git BASH终端
hexo clean && hexo generate && hexo deploy  

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d
  • hexo clean：删除之前生成的文件，可以用hexo cl缩写。
  • hexo generate：生成静态文章，可以用hexo g缩写
  • hexo deploy：部署文章，可以用hexo d缩写
    GitHub Octocat
    注意：deploy时可能要你输入 username 和 password。
    如果出现Deploy done，则说明部署成功了。
    GitHub Octocat
    稍等两分钟，打开浏览器访问：https://你github的用户名.github.io ，这时候我们就可以看到博客内容了。
    如上 https://Kobayashi-007.github.io
    GitHub Octocat

2.将静态博客挂载到 Cloudflare Pages

  1. 在 Workers 和 Pages 中选择 Pages 的 连接到 Git
  2. 然后登录你Blog仓库对应的GitHub帐号
  3. 点击保存并部署后等待部署完成即可。
  4. 提示成功！您的项目已部署到以下区域：全球后，浏览器访问：https://Kobayashi-007.pages.dev ，这时候我们就可以看到博客内容了。
    • https://项目名.pages.dev 此域名已被墙 需要 魔法 自行准备. （本站不提供如何魔法）
    • 这时你也就可以将你的<用户名>.github.io的仓库设置为Private私库了
    • Cloudflare 域名解析需要 24-48 小时,快的话也只需要几个小时半天（这个看脸）
  5. 如果你有自己的域名，你可以在这里绑定你自己的自定义域，即可

如何使用

新建一篇博文

1
hexo new 这是一篇新的博文
  • 然后用文本编辑器去编辑_posts/这是一篇新的博文.md里的内容即可，注意要使用Markdown格式书写。
  • 详细使用方法可以查阅 https://hexo.io/zh-cn/docs/writing

编辑完文章保存后可以使用如下命令，生成本地页面 http://localhost:4000/ ，进行预览

1
2
3
4
5
6
7
// Git BASH终端
hexo cl && hexo s

// 或者

// VSCODE终端
hexo cl; hexo s

确认无误后使用以下命令，将本地文章推送至GitHub仓库即可

1
2
3
4
5
6
7
// Git BASH终端
hexo cl && hexo g && hexo d

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d

VSCODE 终端首次执行报错

  • 使用管理员身份打开 powershell ,输入以下命令
1
Set-ExecutionPolicy RemoteSigned

3.安装主题

1.1. Git 安裝

  • 在博客根目录里安装最新版主题
1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
  • 第一次使用需要安装 pug 以及 stylus 的渲染器
1
npm install hexo-renderer-pug hexo-renderer-stylus --save

1.2. 应用主题

  • 修改 hexo 配置文件_config.yml，把主题改为anzhiyu
1
theme: anzhiyu

1.3. 覆盖配置

  • 覆盖配置可以使主题配置放置在 anzhiyu 目录之外，避免在更新主题时丢失自定义的配置。

  • 如果你是linux系统就执行以下命令

1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

  • 如果你是windows系统就请手动将/themes/anzhiyu/_config.yml复制到根目录下并重命名为_config.anzhiyu.yml即可。

  • 以后如果修改任何主题配置，都只需修改 _config.anzhiyu.yml 的配置即可。

  • 注意：

  • 只要存在于 _config.anzhiyu.yml 的配置都是高优先级，修改原 _config.yml 是无效的。

  • 每次更新主题可能存在配置变更，请注意更新说明，可能需要手动对 _config.anzhiyu.yml 同步修改。

  • 想查看覆盖配置有没有生效，可以通过 hexo g --debug 查看命令行输出。

  • 如果想将某些配置覆盖为空，注意不要把主键删掉，不然是无法覆盖的

1.4. 配置主题与主站配置文件

  • 到这一步主题部署就完成了，就是这么简单！！！
1
2
3
4
5
//本地预览
hexo cl; hexo s

//推送更新上线
hexo cl; hexo g; hexo d

1.5.生成标签页和分类页

  • 执行以下命令生成标签页
1
hexo new page tags
  • 找到 source/tags/index.md 这个文件，修改添加 type: "tags"
1
2
3
4
5
6
7
---
title: 标签
date: 2024-07-05 03:36:02
type: "tags"
comments: false
top_img: false
---
  • 执行以下命令生成分类页
1
hexo new page categories
  • 剩下的工作就是配置_config.yml和_config.anzhiyu.yml文件，修改博客参数。

📚 Hexo博客搭建与主题美化教程导航

  1. Hexo博客搭建系列 No.0 Spaceship.com域名购买完整指南 - Spaceship.com - 从注册到配置全解析
  2. Hexo博客搭建系列 No.0 阿里云域名购买完整指南 - 阿里云域名购买完整指南 - 从注册到配置全解析
  3. Hexo博客搭建系列 No.0 腾讯云域名购买完整指南 - 腾讯云域名购买完整指南 - 从注册到配置全解析
  4. Hexo博客搭建系列 No.1 搭建Hexo博客 - 环境配置与安装
  5. Hexo博客搭建系列 No.2 搭建Hexo博客 - 主题配置与部署 ✨ 当前教程
  6. Hexo博客搭建系列 No.3 搭建Hexo博客 - 基础写作与管理
  7. Hexo博客搭建美化系列 No.1 搭建Hexo博客 - 敬请期待
  8. Hexo博客搭建美化系列 No.2 搭建Hexo博客 - 敬请期待
  9. Hexo博客搭建美化系列 No.3 搭建Hexo博客 - 敬请期待
  10. Hexo博客搭建美化系列 No.4 搭建Hexo博客 - 敬请期待
  11. Hexo博客搭建美化系列 No.5 搭建Hexo博客 - 敬请期待
  12. Hexo博客搭建美化系列 No.6 搭建Hexo博客 - 敬请期待
  13. Hexo博客搭建美化系列 No.7 搭建Hexo博客 - 敬请期待
  14. Hexo博客搭建美化系列 No.8 搭建Hexo博客 - 敬请期待
  15. Hexo博客搭建美化系列 No.9 搭建Hexo博客 - 敬请期待
  16. Hexo博客搭建美化系列 No.10 搭建Hexo博客 - 敬请期待
  17. Hexo博客搭建美化系列 No.11 搭建Hexo博客 - 敬请期待
  18. Hexo博客搭建美化系列 No.12 搭建Hexo博客 - 敬请期待